<link rel="stylesheet" href="../public/jqGrid/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="../public/jquery-ui/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="../css/cust.jqGrid.css"/>

<section class="content-header">
    <h1>
        菜单管理
        <small>菜单权限设置</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboad"></i> 装备管理系统</a></li>
        <li><a href="#">系统设置</a></li>
        <li class="active">菜单管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <table id="grid-table"></table>
                    <div id="grid-pager"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="../public/jqGrid/js/jquery.jqGrid.min.js"></script>
<script src="../public/jqGrid/js/minified/i18n/grid.locale-cn.js"></script>
<script type="text/javascript">

    var menu_data = [];
    var role_list = [];

    var menu_mgr = function () {

        return {

            test: {
                id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00", balance: "150.00", enbl: "1",
                level: "0", parent: "", isLeaf: false, expanded: false, loaded: true
            },

            bind_listener: function () {
                $('i.visible_check').on('click', function () {
                    //TODO ajax post alter data
                    swal('Send an ajax request toggle checked/unchecked state.');
                    $(this).toggleClass('fa-check-square-o fa-square-o');
                });

                $('select.roles_select').select2({
                    placeholder: "请点击选择选取角色...",
                }).on('select2:selecting', function (evt) {
                    //TODO listening about select role
                    swal('Selecting Role By Id [' + evt.params.args.data.id + ']');
                }).on('select2:unselecting', function (evt) {
                    //TODO listening about remove role
                    swal('Unselecting Role By Id [' + evt.params.args.data.id + ']');
                });

                $.bootstrapLoading.end();

            },

            getRoleList: function (callback_func) {
                $.ajax({
                    url: '/Setting/Role',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            role_list = menu_mgr.recursion_role(data.roles);
                            callback_func();
                        } else {
                            swal('异常！', '没有获取到角色信息！', 'error');
                        }
                    },
                    error: function (req, err_code, err_msg) {
                        swal('异常！', err_msg, 'error');
                    }
                });
            },

            recursion_role: function (rl) {
                var rr = [];
                for (var i = 0; i < rl.length; i++) {
                    var init = true;
                    var inum = 0;
                    var rtmp = {id: rl[i].id, text: rl[i].name};

                    for (var j = 0; j < rr.length; j++) {
                        if (rl[i].group != undefined && rr[j].text == rl[i].group) {
                            init = false;
                            inum = j;
                            break;
                        }
                    }
                    if (init) {
                        if (rl[i].group != undefined || r[i].group != "") {
                            rr.push({text: rl[i].group, children: []});
                            inum = rr.length - 1;
                        } else {
                            rr.push(rtmp);
                        }
                    }
                    rr[inum].children.push(rtmp);
                }

                return rr;
            },

            recursion_menu: function (data, level, parent) {
                var level = (level == undefined) ? 0 : level;
                var parent = (parent == undefined) ? "" : parent;

                for (var i = 0; i < data.length; i++) {
                    var o_data = data[i];
                    var t_data = {id: o_data.id, url: o_data.url, visible: o_data.visible, memo: o_data.memo};
                    t_data.name = '<i class="' + o_data.ico + '"></i>&nbsp;' + o_data.name;
                    t_data.visible = (o_data.visible == 1) ? '<i class="visible_check handle fa fa-check-square-o"></i>' : '<i class="visible_check handle fa fa-square-o"></i>';
                    t_data.roles = '<select multiple="multiple" class="roles_select" style="width: 100%;">';
                    var o_data_roles = {};
                    if (o_data.roles != undefined) {
                        for (var j = 0; j < o_data.roles.length; j++) {
                            o_data_roles[o_data.roles[j].role_id] = o_data.roles[j].role_name;
                        }
                    }
                    for (var x = 0; x < role_list.length; x++) {
                        if (role_list[x].id == undefined) {
                            t_data.roles += '<optgroup label="' + role_list[x].text + '">';
                            for (var y = 0; y < role_list[x].children.length; y++) {
                                var selected = "";
                                var sloption = role_list[x].children[y];
                                if (o_data_roles[sloption.id] != undefined) {
                                    selected = "selected";
                                }
                                t_data.roles += '<option value="' + sloption.id + '"' + selected + '>' + sloption.text + '</option>';
                            }
                            t_data.roles += '</optgroup>';
                        } else {
                            var selected = "";
                            if (o_data_roles[role_list[x].id] != undefined) {
                                selected = "selected";
                            }
                            t_data.roles += '<option value="' + role_list[x].id + '"' + selected + '>' + role_list[x].text + '</option>';
                        }
                    }
                    t_data.roles += '</select>';
                    t_data.level = level;
                    t_data.parent = parent;
                    t_data.loaded = true;
                    t_data.expanded = (o_data.children != undefined);
                    t_data.isLeaf = (o_data.children == undefined);

                    menu_data.push(t_data);

                    if (o_data.children != undefined) {
                        menu_mgr.recursion_menu(o_data.children, level + 1, o_data.id);
                    }
                }
            },

            generatejqGrid: function (init_data) {
                menu_mgr.getRoleList(function () {

                    menu_mgr.recursion_menu(init_data);
                    var grid = $("#grid-table");
                    grid.jqGrid({
                        datatype: "jsonstring",
                        datastr: menu_data,
                        colNames: ["编号", "菜单名称", "资源URI", "可视", "菜单描述", "角色列表"],
                        colModel: [
                            {name: 'id', index: 'id', width: 1, hidden: true, key: true},
                            {name: 'name', index: 'name', width: 100},
                            {name: 'url', index: 'url', width: 80, align: "left"},
                            {
                                name: 'visible', index: 'visible', width: 30, align: "center",
//                            formatter: 'checkbox', editoptions: {value: '1:0'},
//                            formatoptions: {disabled: false}
                            },
                            {name: 'memo', index: 'memo', width: 80, align: "left"},
                            {name: 'roles', index: 'roles', width: 180, align: "left"}
                        ],
                        height: 'auto',
                        gridview: true,
                        rowNum: 10000,
                        sortname: 'id',
                        treeGrid: true,
                        treeGridModel: 'adjacency',
                        treedatatype: "local",
                        ExpandColumn: 'name',
//                    caption: "菜单列表",
                        autowidth: true,
                        jsonReader: {
                            repeatitems: false,
                            root: function (obj) {
                                return obj;
                            },
                            page: function (obj) {
                                return 1;
                            },
                            total: function (obj) {
                                return 1;
                            },
                            records: function (obj) {
                                return obj.length;
                            }
                        },
                        loadComplete: function () {
                            menu_mgr.bind_listener();
                        }
                    });
                });
            },

            init: function () {

                if (jQuery().jqGrid) {
                    $.ajax({
                        url: '/Setting/Menu/Index',
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            $.bootstrapLoading.start();
                            menu_mgr.generatejqGrid(data.children);
                        },
                        error: function (req, err_code, err_msg) {
                            swal('异常！', err_msg, 'error');
                        }
                    });
                }
            }
        }
    }();

    menu_mgr.init();

</script>
